<route lang="json5">
{
	style: {
		navigationBarTitleText: '任务详情',
		enablePullDownRefresh: true,
	},
}
</route>
<template>
	<view class="page">
		<view class="mask" v-if="previewSrc" @click="previewSrc = ''">
			<image :src="previewSrc" mode="widthFix" @click.top="() => {}" />
		</view>

		<image
			class="main-image"
			v-if="task && task.goods_image_url"
			:src="task.goods_image_url"
			mode="aspectFill"
		></image>

		<view class="box">
			<image
				v-if="task && task.is_get && userTask && !userTask.comment_image_url && task?.is_comment != 0"
				class="yjd"
				src="https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/is_get_order.png"
				mode="scaleToFill"
			/>

			<image
				v-if="
					(userTask && userTask.comment_image_url) ||
					(task?.is_comment == 0 && userTask && userTask?.create_order_image_url)
				"
				class="yjd"
				src="https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/order_finish.png"
				mode="scaleToFill"
			/>

			<view class="title line2">
				<text class="tag1" v-if="task.platform == 1">{{ appTxtStore?.appTxt?.platforms['1'] }}</text>
				<text class="tag1" v-if="task.platform == 2">{{ appTxtStore?.appTxt?.platforms['2'] }}</text>
				<text class="tag1" v-if="task.platform == 3">{{ appTxtStore?.appTxt?.platforms['3'] }}</text>
				<text class="tag1" v-if="task.platform == 4">{{ appTxtStore?.appTxt?.platforms['4'] }}</text>

				<text>{{ task.title }}</text>

				<text class="tag" v-if="task.is_comment">{{ appTxtStore?.appTxt?.tags?.comment[1] }}</text>
				<text class="tag" v-if="task.is_real_goods == 1">{{ appTxtStore?.appTxt?.tags.real_goods[1] }}</text>
				<text class="tag" v-if="task.is_real_goods == 0">{{ appTxtStore?.appTxt.tags.real_goods[0] }}</text>
			</view>

			<view class="row">
				<text>
					<text class="sub-title">{{ appTxtStore?.appTxt?.index?.task_reward?.name }}：</text>
					{{ appTxtStore?.appTxt?.unit }}{{ task.unit_price }}
				</text>
			</view>

			<wd-progress :percentage="computedProgress" color="linear-gradient(#e03c39, #dd3633)" hide-text />

			<view class="progress">
				<view class="progress-item">
					<text>{{ task.surplus_num }}</text>
					<text>剩余</text>
				</view>

				<view class="progress-item">
					<text>{{ task.total_num }}</text>
					<text>总数</text>
				</view>
			</view>

			<!-- <view class="row-between">
				<text class="title1" style="color: #e63e2e">{{ appTxtStore.appTxt.task_detail.shop_name.name }}</text>
				<text class="value" style="color: #e63e2e">{{ task?.shop_name }}</text>
			</view> -->

			<view class="new-line">
				<text class="line-title">{{ appTxtStore?.appTxt?.task_detail?.shop_name?.name }}</text>
				<text class="value line1">{{ task?.shop_name }}</text>
				<text class="copy" @click="copyStoreName">复制</text>
			</view>

			<view class="new-line" v-if="task && task.goods_link">
				<text class="line-title">{{ appTxtStore?.appTxt?.task_detail?.goods_link?.name }}</text>
				<text class="value line1">{{ task?.goods_link }}</text>
				<text class="copy" @click="openGoodsLink">复制</text>
			</view>

			<!-- <text class="out-link" v-if="task.goods_link" @click="openGoodsLink">
				{{ appTxtStore.appTxt.task_detail.goods_link.name }}：{{ task.goods_link }}
			</text> -->
		</view>

		<view class="box" v-if="task && task.describe_content">
			<rich-text :nodes="task.describe_content"></rich-text>
		</view>

		<!-- 报酬选项 -->
		<view class="float-btn" v-if="task && task.button_list_status">
			<wd-button
				type="primary"
				v-if="task.button_list_status.create_order"
				custom-style="background-color:#E63E2E;color:#fff;"
				@click="choiceAssociation"
			>
				{{ appTxtStore?.appTxt?.task_detail?.buttons?.create_order?.name }}
			</wd-button>

			<wd-button
				v-if="!showOpenSetting && task.button_list_status.download_comment_image"
				:loading="downloading"
				type="primary"
				@click="oneClickCopying"
				custom-style="background-color:#E63E2E;color:#fff;"
			>
				{{ appTxtStore?.appTxt?.task_detail?.buttons?.download_comment_img?.name }}
			</wd-button>

			<!-- <wd-button
				:loading="uploading"
				type="primary"
				v-if="task.button_list_status.create_order_image"
				custom-style="background-color:#E63E2E;color:#fff;"
				@click="uploadOrderImg"
			>
				{{ appTxtStore.appTxt.task_detail.buttons.upload_order_img.name }}
			</wd-button>

			<wd-button
				:loading="commenting"
				type="primary"
				v-if="task.button_list_status.create_comment_image"
				custom-style="background-color:#E63E2E;color:#fff;"
				@click="uploadCommentImg"
			>
				{{ appTxtStore.appTxt.task_detail.buttons.upload_comment_img.name }}
			</wd-button> -->
			<wd-button
				type="primary"
				v-if="task.button_list_status.cancel_order"
				custom-style="background-color:#E63E2E;color:#fff;"
				@click="cancelOrder"
			>
				{{ appTxtStore?.appTxt?.task_detail?.buttons?.cancel_order?.name }}
			</wd-button>

			<wd-button
				v-if="showOpenSetting"
				type="primary"
				custom-style="background-color:#E63E2E;color:#fff;"
				open-type="openSetting"
				@opensetting="handleOpenSetting"
			>
				{{ appTxtStore?.appTxt?.task_detail?.buttons?.authorize_save_img?.name }}
			</wd-button>
		</view>

		<wd-popup
			v-model="show"
			position="bottom"
			closable
			scroll-lock
			:safe-area-inset-bottom="true"
			custom-style="height: 400rpx;"
		>
			<view class="select-container">
				<text>选择{{ appTxtStore?.appTxt?.index?.task_reward?.name }}</text>

				<wd-radio-group v-model="reward_id" shape="dot" custom-style="flex:1;">
					<wd-radio v-for="item in associationList" :key="item.value" :value="`${item.value}`">
						{{ item.name }}
					</wd-radio>
				</wd-radio-group>

				<wd-button custom-style="background-color:#E63E2E;color:#fff;margin-top:24rpx;" block @click="submit">
					确认接单
				</wd-button>
			</view>
		</wd-popup>

		<wd-popup
			v-model="cancelShow"
			position="bottom"
			closable
			scroll-lock
			:safe-area-inset-bottom="true"
			custom-style="height: 400rpx;"
		>
			<view class="select-container">
				<text>取消接单</text>

				<wd-input v-model="cancel_reason" label="取消原因" required placeholder="请输入取消原因"></wd-input>

				<wd-button
					custom-style="background-color:#E63E2E;color:#fff;margin-top:24rpx;"
					block
					@click="submitCancelOrder"
				>
					确认取消
				</wd-button>
			</view>
		</wd-popup>

		<!-- 评价显示 -->
		<view class="box">
			<view class="new-line" v-if="data">
				<text class="line-title">
					{{ appTxtStore?.appTxt?.task_detail?.comment_content?.name }}
				</text>

				<text class="value line1">
					{{ data?.comment_content }}
				</text>

				<text @click="clickCopying" class="copy">复制</text>
			</view>

			<view class="new-line" v-if="data && !data?.comment_content">
				<text class="title">
					{{ appTxtStore?.appTxt?.task_detail?.comment_describe?.name }}
				</text>

				<text class="value line1">
					{{ data?.describe_content }}
				</text>
			</view>

			<text class="title1" v-if="data">{{ appTxtStore?.appTxt?.task_detail?.comment_images?.name }}</text>
			<view class="grid-box" v-if="data">
				<image
					mode="widthFix"
					v-for="(item, index) in data?.image_list"
					:key="`image${index}`"
					:src="item"
					@click="() => (previewSrc = item)"
				/>
			</view>

			<view class="new-line" v-if="task?.task_status == 1 && task?.button_list_status?.create_order_image">
				<text class="line-title">{{ appTxtStore?.appTxt?.task_detail?.order_sn?.name }}</text>
				<text class="value line1">{{ userTask?.order_sn }}</text>
				<text
					class="copy"
					@click="uploadOrderSn"
					v-if="
						(task.is_comment == 1 && !userTask?.comment_image_url) ||
						(task.is_comment == 0 && !userTask?.create_order_image_url)
					"
				>
					编辑
				</text>
			</view>

			<text
				class="title1"
				v-if="(userTask && userTask.create_order_image_url) || task?.button_list_status?.create_order_image"
			>
				{{ appTxtStore?.appTxt?.task_detail?.order_screenshot.name }}
			</text>
			<view
				class="grid-box"
				v-if="(userTask && userTask.create_order_image_url) || task?.button_list_status?.create_order_image"
			>
				<image
					v-if="userTask && userTask.create_order_image_url"
					:src="userTask.create_order_image_url"
					mode="widthFix"
					@click="() => (previewSrc = userTask.create_order_image_url)"
				/>
				<image
					v-else
					class="upload"
					@click="uploadOrderImg"
					src="https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/upload_img.png"
				/>
				<text
					class="del-icon"
					v-if="
						(task.is_comment == 1 &&
							userTask &&
							userTask?.create_order_image_url &&
							!userTask?.comment_image_url) ||
						(task.is_comment == 0 && !userTask?.create_order_image_url)
					"
					@click="() => deleteUploadImg(1)"
				>
					删除
				</text>
			</view>

			<text
				class="title1"
				v-if="
					(userTask && userTask?.comment_image_url) ||
					(task?.button_list_status?.create_comment_image && task.is_comment)
				"
			>
				{{ appTxtStore?.appTxt?.task_detail?.comment_screenshot?.name }}
			</text>
			<view
				class="grid-box"
				v-if="
					(userTask && userTask?.comment_image_url) ||
					(task?.button_list_status?.create_comment_image && task.is_comment)
				"
			>
				<image
					v-if="userTask && userTask?.comment_image_url"
					:src="userTask.comment_image_url"
					mode="widthFix"
					@click="() => (previewSrc = userTask.comment_image_url)"
				/>
				<image
					v-else
					class="upload"
					@click="uploadCommentImg"
					src="https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/upload_img.png"
				/>
				<text class="del-icon" v-if="userTask && !userTask.comment_image_url" @click="() => deleteUploadImg(2)">
					删除
				</text>
			</view>
		</view>

		<view style="width: 750rpx; height: 300rpx"></view>
	</view>
</template>
<script setup>
// #ifdef MP-WEIXIN
import { upload } from '@/utils/alioss'
import { access, downloadFile, saveImageToPhotosAlbum } from '@/utils/downImage'
// #endif
import { useAppTxtStore } from '@/store/appTxt'
import { http } from '@/utils/http'
import dayjs from 'dayjs'
import { useUserStore } from '@/store'

defineOptions({
	name: 'Task',
})

const id = ref('')
// 预览图片
const previewSrc = ref('')

const appTxtStore = useAppTxtStore()

// 任务奖励
const associationList = computed(() => {
	if (task.value && task.value.association_option_list && task.value.association_option_list.length > 0) {
		return task.value.association_option_list.map((item) => ({
			name: item.name,
			value: item.value,
		}))
	} else {
		return null
	}
})

const task = ref({})
const errText = ref('')

const userTask = computed(() => {
	if (task.value && Array.isArray(task.value.user_task)) {
		return null
	} else {
		return task.value.user_task
	}
})

const downloading = ref(false)
const uploading = ref(false)
const commenting = ref(false)

const initSetting = () => {
	uni.getSetting({
		success: ({ authSetting }) => {
			console.log('authSetting', authSetting)
			if (authSetting['scope.writePhotosAlbum'] == false) {
				showOpenSetting.value = true
			}
		},
		fail: (error) => {
			console.log('error', error)
		},
	})
}

const getData = async () => {
	try {
		let res = await http.get('/Usersd/taskDetails', { task_id: id.value })
		if (res.code == 200) {
			task.value = res.result
			// 设置默认值
			if (task.value && task.value.association_option_list && task.value.association_option_list.length > 0) {
				task.value.association_option_list.map((item) => {
					if (item.is_select) {
						reward_id.value = item.value
					}
				})
			}

			// #ifdef H5
			task.value.describe_content = task.value.describe_content.replaceAll(
				'<img',
				'<img style="width:100%;height:auto;display:block;"',
			)
			// #endif

			// #ifdef MP-WEIXIN
			task.value.describe_content = task.value.describe_content.replaceAll('style=""', '')
			task.value.describe_content = task.value.describe_content.replaceAll(
				'<img',
				'<img style="width:100%;height:auto;display:block;"',
			)
			// #endif

			//
			uni.stopPullDownRefresh()

			if (userTask.value && userTask.value.cid) {
				getMyComment()
			}
		}
	} catch (error) {
		uni.stopPullDownRefresh()
	}
}

const clickCopying = async () => {
	uni.setClipboardData({
		data: data.value.comment_content,
		showToast: false,
		success: () => {
			uni.showToast({
				title: '复制完成',
				icon: 'none',
				mask: true,
				duration: 2000,
			})
		},
		fail: (err) => {},
	})
}

const copyStoreName = () => {
	if (task.value.shop_name) {
		uni.setClipboardData({
			data: task.value.shop_name,
			success: (result) => {},
			fail: (error) => {},
		})
	}
}

const deleteUploadImg = async (action_type) => {
	uni.showModal({
		title: '提示',
		content:
			action_type == 1
				? appTxtStore.appTxt.task_detail.tips.del_order_img.name
				: appTxtStore.appTxt.task_detail.tips.del_comment_img.name,
		showCancel: true,
		success: async ({ confirm, cancel }) => {
			if (confirm) {
				let res = await http.post('/Usersd/delTaskImage', { task_id: task.value.id, action_type })
				console.log('res', res)
				if (res.code == 200) {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						mask: true,
					})

					getData()
				}
			}
		},
	})
}

const showOpenSetting = ref(false)

const oneClickCopying = async () => {
	downloading.value = true

	// #ifdef MP-WEIXIN
	uni.showLoading({
		title: '下载中',
		mask: true,
	})

	for (let index = 0; index < data.value.image_list.length; index++) {
		let url = data.value.image_list[index]

		let filename = url.split('/').at(-1).split('?')[0]

		let filePath = `${wx.env.USER_DATA_PATH}/cache5`
		let name = `${wx.env.USER_DATA_PATH}/cache5/${filename}`

		try {
			let res = await access(filePath)
			if (res.success) {
				let res1 = await downloadFile(url, name)
				if (res1.success) {
					// 下载好的
					let res2 = await saveImageToPhotosAlbum(res1.filePath)
					if (res2.success) {
						if (index == data.value.image_list.length - 1) {
							let res3 = await http.post('/Usersd/updateCommetnImageDownloadState', {
								cid: userTask.value.cid,
							})

							if (res3.code == 200) {
								uni.showToast({
									title: '图片下载成功',
									icon: 'none',
									mask: true,
								})
								downloading.value = false

								await getData()
							}
						}
					}
				}
			}
		} catch (error) {
			console.log('%c [ error ]-302', 'font-size:13px; background:pink; color:#bf2c9f;', error)

			if (error.msg == 'saveImageToPhotosAlbum:fail auth deny') {
				uni.getSetting({
					success: ({ authSetting }) => {
						console.log('authSetting', authSetting)
						if (authSetting['scope.writePhotosAlbum'] == false) {
							//
							uni.showToast({
								title: '请重新授权下载照片',
								icon: 'none',
								mask: true,
								duration: 2000,
							})

							showOpenSetting.value = true
						}
					},
					fail: (error) => {
						console.log('error', error)
					},
				})

				downloading.value = false
				errText.value = JSON.stringify(error)
			} else {
				uni.showToast({
					title: JSON.stringify(error),
					icon: 'none',
					mask: true,
					duration: 2000,
				})

				downloading.value = false
				errText.value = JSON.stringify(error)
			}
		}
	}
	uni.hideLoading()
	uni.setClipboardData({
		data: data.value.comment_content,
		showToast: false,
		success: () => {
			downloading.value = false

			uni.showToast({
				title: '复制下载完成',
				icon: 'none',
				mask: true,
				duration: 2000,
			})
		},
		fail: (err) => {
			downloading.value = false
		},
	})

	await getData()
	// #endif

	// #ifndef MP-WEIXIN
	uni.setClipboardData({
		data: data.value.comment_content,
		showToast: false,
		success: () => {
			downloading.value = false

			uni.showToast({
				title: '复制完成',
				icon: 'none',
				mask: true,
				duration: 2000,
			})
		},
		fail: (err) => {
			downloading.value = false
		},
	})
	// #endif
}

const handleOpenSetting = () => {
	showOpenSetting.value = false
}

const openGoodsLink = () => {
	// uni.navigateTo({ url: '/pages/webview/index?url=' + task.value.goods_link })
	uni.setClipboardData({
		data: task.value.goods_link,
		success: (result) => {},
		fail: (error) => {},
	})
}

const cancel_reason = ref('')

const cancelShow = ref(false)
/**
 * 取消接单
 */
const cancelOrder = async () => {
	// 取消接单
	cancelShow.value = true
}

const userStore = useUserStore()

const submitCancelOrder = async () => {
	if (userStore.userInfo.trust_value < task.value.get_min_trust_value) {
		uni.showToast({
			title: '不符合接单条件',
			icon: 'none',
			mask: true,
		})

		return
	}

	// 提交取消接单

	if (!cancel_reason.value) {
		uni.showToast({
			title: '请输入取消原因',
			icon: 'none',
			mask: true,
		})
		return
	}

	uni.showModal({
		title: '提示',
		content: appTxtStore.appTxt.task_detail.tips.cancel_order.name,
		showCancel: true,
		success: async ({ confirm, cancel }) => {
			if (confirm) {
				let res = await http.post('/Usersd/cancelOrder', {
					task_id: task.value.id,
					cancel_reason: cancel_reason.value,
				})
				if (res.code == 200) {
					cancelShow.value = false

					console.log('res', res)
					uni.showToast({
						title: res.msg,
						icon: 'none',
						mask: true,
					})

					await getData()
				}
			}
		},
	})
}

// 选择奖励
const show = ref(false)
const choiceAssociation = () => {
	show.value = true
}

const uploadOrderSn = async () => {
	uni.showModal({
		title: '请填写订单编号',
		content: userTask.value.order_sn || '',
		editable: true,
		placeholderText: '请填写订单编号',
		showCancel: true,
		success: async (result) => {
			console.log('%c [ result ]-580', 'font-size:13px; background:pink; color:#bf2c9f;', result)

			if (result.confirm) {
				let value = result.content
				if (!value) {
					uni.showToast({
						title: '请填写订单编号',
						icon: 'none',
						mask: true,
					})
					return
				}
				let res = await http.post('/Usersd/setOrderSn', { task_id: task.value.id, order_sn: value })

				if (res.code == 200) {
					console.log('res', res)
					getData()
				}
			}
		},
	})
}

// 上传参与图片
const uploadOrderImg = async () => {
	let question = appTxtStore.appTxt.task_detail.tips.upload_order_img.name

	if (userTask.value.create_order_image_url) {
		question = '您已上传参与截图，是否替换'
	}

	uni.showModal({
		title: '提示',
		content: question,
		success: async function (result) {
			if (result.confirm) {
				uploading.value = true
				try {
					let res = await upload()
					console.log('res', res)
					if (res.success) {
						try {
							let res1 = await http.post('/Usersd/updateOrderImages', {
								task_id: task.value.id,
								file_name: res.filename,
							})

							console.log('res1', res1)

							if (res1.code == 200) {
								uni.showToast({
									title: res1.msg,
									icon: 'none',
									mask: true,
									duration: 2000,
								})

								await getData()

								// 上传订单编号
								uploadOrderSn()
							}
						} catch (error) {
							uni.showToast({
								title: '上传参与截图失败',
								icon: 'none',
								mask: true,
								duration: 2000,
							})
						} finally {
							uploading.value = false
						}
					} else {
						uni.showToast({
							title: JSON.stringify(res.err),
							icon: 'error',
							mask: true,
						})
					}
				} catch (error) {
					console.log('error', error)
					uni.showToast({
						title: '上传发生错误',
						duration: 2000,
						icon: 'none',
					})

					uploading.value = false
				}
			}
		},
	})

	return

	uni.showModal({
		title: '提示',
		content: question,
		success: function (res) {
			if (res.confirm) {
				uni.chooseImage({
					sizeType: ['original'],
					sourceType: ['album'],
					success: async (result) => {
						uploading.value = true

						uni.showLoading({
							title: '图片上传中',
							mask: true,
						})

						let name = result.tempFiles[0].name || result.tempFiles[0].path
						console.log('%c [ name ]-319', 'font-size:13px; background:pink; color:#bf2c9f;', name)

						name = name.split('.')[1]
						console.log('%c [ name ]-316', 'font-size:13px; background:pink; color:#bf2c9f;', name)

						let filename = dayjs().format('YYYYMMDDHHMMss') + '.' + name

						uni.uploadFile({
							url: '/Usersd/userUploadFile',
							fileType: 'image',
							filePath: result.tempFilePaths[0],
							formData: {
								image_type: 2,
								task_id: task.value.id,
								file_name: filename,
							},
							header: {
								Authorization: uni.getStorageSync('token'),
							},
							name: 'file',
							success: async (res3) => {
								console.log('%c [ res3 ]-334', 'font-size:13px; background:pink; color:#bf2c9f;', res3)
								console.log('typeof res3.data', typeof res3.data)
								console.log('res3.data', res3.data)
								try {
									if (res3.data.indexOf('200') != -1) {
										let res1 = await http.post('/Usersd/updateOrderImages', {
											task_id: task.value.id,
											file_name: filename,
										})

										console.log('res1', res1)

										if (res1.code == 200) {
											uni.showToast({
												title: res1.msg,
												icon: 'success',
												mask: true,
											})

											getData()
										}
									}
								} catch (error) {
									console.log('error', error)
								}
								uploading.value = false

								uni.hideLoading()
							},
							fail: (error) => {
								uni.hideLoading()

								uploading.value = false
							},
						})
					},
					fail: (error) => {},
				})
			} else if (res.cancel) {
			}
		},
	})
}

const uploadCommentImg = async () => {
	if (userTask.value.comment_image_url) {
		uni.showToast({
			title: '不能重复上传评价图片',
			icon: 'none',
			mask: true,
		})
		return
	}

	if (!userTask.value.create_order_image_url) {
		uni.showToast({
			title: '请先上传下单图片',
			icon: 'none',
			mask: true,
		})
		return
	}

	let question = appTxtStore.appTxt.task_detail.tips.upload_comment_img.name

	uni.showModal({
		title: '提示',
		content: question,
		success: async function (result) {
			if (result.confirm) {
				commenting.value = true
				try {
					let res = await upload()
					console.log('res', res)
					if (res.success) {
						try {
							let res1 = await http.post('/Usersd/updateOrderCommentImages', {
								cid: userTask.value.cid,
								file_name: res.filename,
							})

							console.log('res1', res1)

							if (res1.code == 200) {
								uni.showToast({
									title: res1.msg,
									icon: 'none',
									mask: true,
									duration: 2000,
								})

								getData()
							}
						} catch (error) {
							uni.showToast({
								title: '上传评价截图失败',
								icon: 'none',
								mask: true,
								duration: 2000,
							})
						} finally {
							commenting.value = false
						}
					} else {
						uni.showToast({
							title: JSON.stringify(res.err),
							icon: 'error',
							mask: true,
						})
					}
				} catch (error) {
					console.log('error', error)
					uni.showToast({
						title: '上传发生错误',
						duration: 2000,
						icon: 'none',
					})

					uploading.value = false
				}
			}
		},
	})

	return

	uni.showModal({
		title: '提示',
		content: question,
		success: function (res) {
			if (res.confirm) {
				uni.chooseImage({
					sizeType: ['original'],
					sourceType: ['album'],
					success: async (result) => {
						commenting.value = true

						uni.showLoading({
							title: '图片上传中',
							mask: true,
						})

						let name = result.tempFiles[0].name || result.tempFiles[0].path
						console.log('%c [ name ]-319', 'font-size:13px; background:pink; color:#bf2c9f;', name)

						name = name.split('.')[1]
						console.log('%c [ name ]-316', 'font-size:13px; background:pink; color:#bf2c9f;', name)

						let filename = dayjs().format('YYYYMMDDHHMMss') + '.' + name

						uni.uploadFile({
							url: '/Usersd/userUploadFile',
							fileType: 'image',
							filePath: result.tempFilePaths[0],
							formData: {
								image_type: 3,
								cid: userTask.value.cid,
								file_name: filename,
							},
							header: {
								Authorization: uni.getStorageSync('token'),
							},
							name: 'file',
							success: async (res3) => {
								console.log('%c [ res3 ]-334', 'font-size:13px; background:pink; color:#bf2c9f;', res3)
								console.log('typeof res3.data', typeof res3.data)
								console.log('res3.data', res3.data)
								try {
									if (res3.data.indexOf('200') != -1) {
										let res1 = await http.post('/Usersd/updateOrderCommentImages', {
											cid: userTask.value.cid,
											file_name: filename,
										})

										console.log('res1', res1)

										if (res1.code == 200) {
											uni.showToast({
												title: res1.msg,
												icon: 'success',
												mask: true,
											})

											getData()
										}
									}
								} catch (error) {
									console.log('error', error)
								}
								commenting.value = false
								uni.hideLoading()
							},
							fail: (error) => {
								uni.hideLoading()
								commenting.value = false
							},
						})
					},
					fail: (error) => {},
				})
			} else if (res.cancel) {
			}
		},
	})
}

const reward_id = ref('-1')
const data = ref(null)

const getMyComment = async () => {
	let res = await http.get('/Usersd/commentDataDetails', { cid: userTask.value.cid })
	if (res.code == 200) {
		data.value = res.result
	}
}

const submit = async () => {
	let res = await http.get('/Usersd/addOrder', { task_id: id.value, reward_id: reward_id.value })
	if (res.code == 200) {
		show.value = false

		uni.showToast({
			title: res.msg,
			icon: 'none',
			duration: 2000,
			mask: true,
		})

		await wxSubscribeMessage()
		await getData()
	}
}

const wxSubscribeMessage = async () => {
	// 参与
	// #ifdef MP-WEIXIN

	// 判断是否需要评价
	if (task.value.is_comment) {
		wx.requestSubscribeMessage({
			tmplIds: ['NvQieASsGqzhjc4o3AmqKKTXrUf7iljBCraDLkC6Ico'],
			success: async (res) => {
				console.log('res', res)
				let arr = []
				Object.keys(res).map((key) => {
					if (key != 'errMsg' && res[key] == 'accept') {
						arr.push(key)
						console.log(res[key])
						uni.showToast({
							title: '订阅成功',
							icon: 'none',
							mask: true,
						})
					}
				})

				let res1 = await http.post('/Usersd/setUserTaskWxID', {
					user_task_id: userTask.value.id,
					type: 0,
				})
				console.log('res', res1)
			},
			fail: (err) => {
				console.log('err', err)
			},
		})
	}

	// #endif
}

const computedProgress = computed(() => {
	if (task.value) {
		return Number(Number((Number(task.value.surplus_num) / Number(task.value.total_num)) * 100).toFixed(2))
	} else {
		return 100
	}
})

onLoad(async (option) => {
	id.value = option.id
	// #ifdef MP-WEIXIN
	initSetting()
	// #endif

	await getData()
})

onPullDownRefresh(() => {
	getData()
})
</script>
<style lang="scss" scoped>
:deep(.wd-progress__outer) {
	height: 20rpx;
	border-radius: 10rpx;
}

:deep(.custom-button) {
	min-width: auto !important;
	box-sizing: border-box;
	width: 32px !important;
	height: 32px !important;
	border-radius: 16px !important;
	margin: 8rpx;
}

:deep(.custom-radio) {
	height: 32px !important;
	line-height: 32px !important;
}

.page {
	padding-top: 24rpx;

	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;

		display: flex;
		justify-content: center;
		align-items: center;

		z-index: 100;
		background-color: rgba($color: #000000, $alpha: 0.85);

		image {
			width: 750rpx;
		}
	}
}

.link {
	width: 710rpx;
	box-sizing: border-box;
	box-shadow: 0 0 10rpx 0 #ccc;
	border-radius: 10rpx;
}

:deep(.link) {
	width: 710rpx;
	box-sizing: border-box;
	box-shadow: 0 0 10rpx 0 #ccc;
	border-radius: 10rpx;
}

.select-container {
	width: 100%;
	min-height: 400rpx;

	box-sizing: border-box;
	padding: 24rpx;

	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;

	text {
		color: #333;
	}
}

.main-image {
	width: 710rpx;
	height: 710rpx;
}

.box {
	overflow: hidden;
	width: 710rpx;
	background: #fff;
	box-sizing: border-box;
	padding: 24rpx;
	gap: 24rpx;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	position: relative;

	.err {
		width: 100%;
		font-size: 24rpx;
	}

	.yjd {
		position: absolute;
		top: 20rpx;
		right: 0rpx;
		width: 128rpx;
		height: 128rpx;
	}

	.new-line {
		width: 100%;
		box-sizing: border-box;

		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;

		gap: 12rpx;

		.line-title {
			font-size: 24rpx;
		}

		.value {
			font-weight: normal;
			color: #333;
			line-height: 40rpx;
			min-height: 40rpx;

			width: 440rpx;
			font-size: 24rpx;
			font-weight: normal;
		}

		.copy {
			font-size: 24rpx;
		}

		.copy:active {
			color: #000000;
			font-weight: 800;
		}
	}

	.title {
		font-weight: normal;
		font-size: 36rpx;
		line-height: 50rpx;
		min-height: 50rpx;

		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: center;

		word-wrap: break-word;

		gap: 10rpx;

		.tag {
			color: #e63e2e;
			font-size: 20rpx;
			line-height: 28rpx;
			border: 2rpx solid #e63e2e;
			box-sizing: border-box;
			padding: 3rpx;
			margin: 0 6rpx;
			border-radius: 3rpx;
		}

		.tag1 {
			color: #fff;
			font-size: 24rpx;
			line-height: 32rpx;
			background-color: #e63e2e;
			border: 2rpx solid #e63e2e;
			box-sizing: border-box;
			padding: 3rpx 6rpx;
			margin: 0 6rpx;
			border-radius: 6rpx;
		}
	}

	.title1 {
		font-weight: normal;
		font-size: 24rpx;
		color: #666;
		line-height: 40rpx;
		min-height: 40rpx;

		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: center;

		word-wrap: break-word;

		gap: 10rpx;
	}

	.value {
		font-weight: 800;
		font-size: 32rpx;
		color: #333;
		line-height: 40rpx;
		min-height: 40rpx;
	}

	.out-link {
		font-weight: normal;
		font-size: 24rpx;
		color: #666;
		line-height: 40rpx;
		min-height: 40rpx;
	}

	.progress {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;

		font-size: 24rpx;

		.progress-item {
			height: 60rpx;

			display: flex;
			flex-flow: column nowrap;
			justify-content: space-between;
			align-items: center;

			text:last-child {
				color: #999;
				font-size: 20rpx;
			}
		}
	}

	.row {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		gap: 24rpx;
		font-weight: 600;
		font-size: 48rpx;
		color: #e63e2e;
		line-height: 48rpx;

		.sub-title {
			font-weight: 500;
			font-size: 28rpx;
			color: #666;
		}
	}

	.row-between {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		gap: 24rpx;
		font-weight: 600;
		font-size: 48rpx;
		line-height: 48rpx;
	}
}

.float-btn {
	width: 750rpx;
	// height: 150rpx;
	box-sizing: border-box;
	padding: 24rpx;
	background-color: #fff;

	border-top: 1rpx solid #f2f2f2;

	position: fixed;
	bottom: 0;
	left: 0;

	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 12rpx;
	z-index: 9;

	button {
		margin: 0;
	}
}

.grid-box {
	width: 100%;
	display: grid;
	grid-template-columns: 100rpx 100rpx 100rpx 100rpx 100rpx;
	gap: 12rpx;

	.del-icon {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}

	.del-icon:active {
		font-weight: 800;
		color: #e63e2e;
	}

	image {
		width: 100rpx;
		height: auto;
		max-height: 150rpx;
		box-sizing: border-box;
	}

	.upload {
		width: 100rpx;
		height: 100rpx;
		background-color: #f2f2f2;
		border-radius: 12rpx;
	}
}

.width100 {
	width: 100%;
}

:deep(.width100) {
	width: 100%;
}

:deep(.popup-container) {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;

	gap: 24rpx;

	.inline-btn {
		width: 610rpx;
		background-color: #e63e2e;
	}
}

.popup-container {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;

	gap: 24rpx;

	.inline-btn {
		width: 610rpx;
		background-color: #e63e2e;
	}
}
</style>
